<div class="row" ng-controller="userListController">
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <form name="form" class="form-validation form-horizontal">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">{{user.id?'修改':'增加'}}用户信息</h4>
                    </div>
                    <div class="modal-body">
                        <!-- 修改-->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group character-counter">
                                    <label class="control-label col-md-2">姓名</label>

                                    <div class="col-md-10">
                                        <input type="text" class="form-control" placeholder="请输入姓名" ng-model="user.name"
                                               value="{{user.name}}" maxlength="50" required>
                                        <label class="character-counter-label-2"
                                               ng-bind="(user.name != undefined ? user.name.length : 0)+' / 50'">
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group character-counter">
                                    <label class="control-label col-md-2">邮箱</label>

                                    <div class="col-md-10">
                                        <input type="text" class="form-control" placeholder="请输入邮箱"
                                               ng-model="user.email" value="{{user.email}}" ng-pattern="/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/" maxlength="50" required/>
                                        <label class="character-counter-label-2"
                                               ng-bind="(user.email != undefined ? user.email.length : 0)+' / 50'">
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group character-counter">
                                    <label class="control-label col-md-2">地址</label>

                                    <div class="col-md-10">
                                        <input type="address" class="form-control" placeholder="请输入地址"
                                               ng-model="user.address" value="{{user.address}}" maxlength="50"
                                               required/>
                                        <label class="character-counter-label-2"
                                               ng-bind="(user.address != undefined ? user.address.length : 0)+' / 50'">
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group character-counter">
                                    <label class="control-label col-md-2">密码</label>

                                    <div class="col-md-10">
                                        <input type="password" class="form-control" placeholder="请输入密码" name="password"
                                               ng-model="user.password" value="{{user.password}}" maxlength="50"
                                               required>
                                        <label class="character-counter-label-2"
                                               ng-bind="(user.password != undefined ? user.password.length : 0)+' / 50'">
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group character-counter">
                                    <label class="control-label col-md-2">电话号</label>

                                    <div class="col-md-10">
                                        <input type="phone" class="form-control" placeholder="请输入电话号"
                                               ng-model="user.phone" value="{{user.phone}}" maxlength="50" required/>
                                        <label class="character-counter-label-2"
                                               ng-bind="(user.phone != undefined ? user.phone.length : 0)+' / 50'">
                                        </label>
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <label class="control-label col-md-2">性别</label>

                                    <div class="col-md-10">
                                        <label class="radio-inline">
                                            <input type="radio" ng-model="user.sex" ng-value="1"> 男
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" ng-model="user.sex" ng-value="0"> 女
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--修改-->
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" ng-disabled="form.$invalid" ng-click="saveUser()"
                                data-dismiss="modal">提交
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h1 class="panel-title">
                    用户列表
                </h1>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-hover table-cell table-bordered">
                            <thead>
                            <tr>
                                <th></th>
                                <th>姓名</th>
                                <th>邮箱</th>
                                <th>地址</th>
                                <th>密码</th>
                                <th>手机号</th>
                                <th>性别</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="user in users">
                                <td>{{$index+1}}</td>
                                <td>{{user.name}}</td>
                                <td>{{user.email}}</td>
                                <td>{{user.address}}</td>
                                <td>{{user.password}}</td>
                                <td>{{user.phone}}</td>
                                <td>{{user.sex==1 | sexFilter}}</td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                            data-target="#myModal" ng-click="updateUser(user)">
                                        修改
                                    </button>
                                    <button class="btn btn-primary btn-sm" ng-click="deleteUser(user.id,user.name)">删除
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <button type="button" class="btn btn-info " data-toggle="modal" data-target="#myModal"
                        ng-click="addUser()">添加用户
                </button>
                <a href="#/welcome" class="btn btn-info">返回首页</a>
            </div>
        </div>
    </div>

</div>
